<template>
	<view class="inventory">
		<u-popup :show="show" :round="10" bgColor="#eee" mode="bottom" @close="close">
			<view class="openPopup">
				<view class="title">
					<view class="utitle">
						选择预约时间
					</view>
					<view class="close" @click="close">
						<u-icon name="close" color="#aaa" size="22"></u-icon>
					</view>
				</view>
				<view class="content">
					<view class="left">
					  <block v-for="(item, index) in nowWeekList" :key="index">
					    <view class="l_item" 
					      :class="{ active: nowWeek === item.label }" 
					      @click="changeDate(item)">
					      {{ item.label }}
					    </view>
					  </block>
					</view>
					<view class="right">
						<scroll-view scroll-y="true" class="scroll-Y" :scroll-into-view="'one'+(oneCategoryActive)">
							<block v-for="(item,index) in selection" >
								<view class="r_item active" v-if="item.active" @click="selectTime(item)" :id="'one'+(index+1)">
									{{item.time}} <u-icon name="checkmark-circle-fill" color="#2979FF" size="20"></u-icon>
								</view>
								<view class="r_item" v-else @click="selectTime(item)">
									{{item.time}}
								</view>
							</block>
						</scroll-view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	/**
	 * 自定义时间选择器
	 * 该组件适用于当日的预约时间
	 */
	export default {
		data() {
		  return {
			show: false,
			timer: null,
			tsection:[
				"00:00","00:15","00:30","00:45",
				"01:00","01:15","01:30","01:45",
				"02:00","02:15","02:30","02:45",
				"03:00","03:15","03:30","03:45",
				"04:00","04:15","04:30","04:45",
				"05:00","05:15","05:30","05:45",
				"06:00","06:15","06:30","06:45",
				"07:00","07:15","07:30","07:45",
				"08:00","08:15","08:30","08:45",
				"09:00","09:15","09:30","09:45",
				"10:00","10:15","10:30","10:45",
				"11:00","11:15","11:30","11:45",
				"12:00","12:15","12:30","12:45",
				"13:00","13:15","13:30","13:45",
				"14:00","14:15","14:30","14:45",
				"15:00","15:15","15:30","15:45",
				"16:00","16:15","16:30","16:45",
				"17:00","17:15","17:30","17:45",
				"18:00","18:15","18:30","18:45",
				"19:00","19:15","19:30","19:45",
				"20:00","20:15","20:30","20:45",
				"21:00","21:15","21:30","21:45",
				"22:00","22:15","22:30","22:45",
				"23:00","23:15","23:30","23:45"
				], // 24 小时时间段
			selection: [],
			nowWeekList: [], // 存储 "今天、明天、后天"
			nowWeek: '', // 当前选择的星期（左侧高亮）
			nowDate: '', // 当前选择的日期（用于匹配右侧时间段）
			nowTime: '',
			subscribeTime: { time: "立即", active: true },
			oneCategoryActive: 0, // 右侧选中的时间索引
		  };
		},
		methods: {
			open(data) {
				this.subscribeTime = data;
				this.getDate();
			},
			close() {
				this.show = false
			},
			upper: function(e) {
			},
			lower: function(e) {
			},
			selectTime(data){
				this.close()
				data.active = true;
				this.$emit("callback",{subscribeTime:data,day:this.nowWeek,time:this.nowDate})
			},
		updateTimeSelection() {
		  this.selection = [];
		
		  let myDate = new Date();
		  let hou = myDate.getHours();
		  let min = myDate.getMinutes();
		  let currentTime = `${String(hou).padStart(2, "0")}:${String(min).padStart(2, "0")}`;
		
		  // 生成时间段
		  for (let i = 0; i < this.tsection.length - 1; i++) {
		    let start = this.tsection[i];
		    let end = this.tsection[i + 1];
		
		    // 当天时间需要排除过去的时间
		    if (this.nowDate === this.nowWeekList[0].date && currentTime > start) continue;
		
		    this.selection.push({ time: end, active: false });
		  }
		
		  // 安全检查 this.subscribeTime
		  let selectedTime = this.subscribeTime && this.subscribeTime.time ? this.subscribeTime.time : "立即";
		
		  // 添加 "立即" 选项
		  this.selection.unshift({ time: "立即", active: selectedTime === "立即" });
		
		  // 计算默认选中的时间
		  this.selection.forEach((item, index) => {
		    if (item.time === selectedTime) {
		      item.active = true;
		      this.oneCategoryActive = index;
		    }
		  });
		},
			getDate() {
			  this.selection = [];
			
			  // 获取当前时间
			  let myDate = new Date();
			  let yy = myDate.getFullYear();
			  let mm = myDate.getMonth() + 1;
			  let dd = myDate.getDate();
			  let hou = myDate.getHours();
			  let min = myDate.getMinutes();
			
			  let weeks = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
			
			  // 计算今天、明天、后天的日期
			  this.nowWeekList = [];
			  for (let i = 0; i < 3; i++) {
			    let futureDate = new Date();
			    futureDate.setDate(dd + i);
			    let fdd = String(futureDate.getDate()).padStart(2, "0");
			    let fmm = String(futureDate.getMonth() + 1).padStart(2, "0");
			    let weekday = weeks[futureDate.getDay()];
			    let fullDate = `${yy}-${fmm}-${fdd}`;
			
			    this.nowWeekList.push({
			      label: `${i === 0 ? "今天" : i === 1 ? "明天" : "后天"}(${weekday})`,
			      date: fullDate
			    });
			  }
			
			  // 默认选择今天
			  this.nowWeek = this.nowWeekList[0].label;
			  this.nowDate = this.nowWeekList[0].date;
			
			  // 生成可选时间段
			  this.updateTimeSelection();
			
			  this.show = true;
			}
		}
	}
</script>
<style>
	.scroll-Y {
		height: 520rpx;
		
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-item {
		height: 420rpx;
		line-height: 420rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 100%;
		height: 420rpx;
		line-height: 420rpx;
		text-align: center;
		font-size: 36rpx;
	}
</style>
<style lang="scss" scoped>
	.inventory {
		.openPopup {
			height: 600rpx;

			.title {
				width: 100%;
				height: 80rpx;
				font-size: 32rpx;
				line-height: 80rpx;
				// border-bottom: 2rpx solid #777;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;

				.close {
					position: absolute;
					right: 30rpx;
					font-size: 30rpx;
					color: #aaa;
				}
			}

			.content {
				height: 520rpx;
				width: 100%;
				display: flex;

				.left {
					width: 35%;

					.l_item {
						width: 100%;
						height: 86rpx;
						line-height: 86rpx;
						text-align: center;
						background-color: #fff;
					}
				}

				.right {
					width: 65%;
					background-color: #fff;
					padding-left: 30rpx;

					.r_item {
						width: 95%;
						height: 80rpx;
						line-height: 80rpx;
						font-size: 34rpx;
						justify-content: space-between;
						border-bottom: 1rpx solid #eee;
						padding: 0 10rpx;
						padding-right: 50rpx;
						background-color: #fff;
						display: flex;
					}
				}
			}

			.active {
				color: #2979FF;
			}
		}
	}
</style>